<template>
  <div class="dish-index">
    <div class="head">
        <form class="form">
            <div class="form-item">
                <label class="name">菜品名称：</label>
                <el-input @clear="getDish" :clearable="true" v-model="dishName" placeholder="请填写菜品名称"></el-input>
            </div>
            <div class="form-item">
                <label class="name">菜品分类：</label>
                <el-select @clear="getDish" :clearable="true" placeholder="请选择菜品分类" v-model="dishCategoryId">
                    <el-option
                     v-for="item in dishCategoryOptions" :key="item.value"
                     :label="item.label"
                     :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="form-item">
                <label class="name">售卖状态：</label>
                <el-select @clear="getDish" :clearable="true" placeholder="请选择售卖状态" v-model="sellStatusId">
                    <el-option
                     v-for="item in sellStatusOptions" :key="item.value"
                     :label="item.label"
                     :value="item.value"></el-option>
                </el-select>
            </div>
            <el-button @click="getDish">查询</el-button>
        </form>
        <div class="delete-add">
            <span @click="deleteDish(checkedList)" class="delete">批量删除</span>
            <el-button @click="$router.push('/dish/add')" type="primary">+ 新建菜品</el-button>
        </div>
    </div>
    <div v-if="dishList.length !== 0" class="main">
        <el-table  @selection-change="selectionChange" :data="dishList">
            <el-table-column width="30" type="selection"></el-table-column>
            <el-table-column min-width="197" prop="name" label="菜品名称"></el-table-column>
            <el-table-column min-width="193" class-name="table-column-pic" label="图片">
                <template slot-scope="scope">
                    <el-image
                     style="width: 40px;height: 40px;border-radius: 5px;"
                     :src="scope.row.image">
                        <div slot="error" class="image-slot">
                            <img src="@/assets/noImg.png" alt="">
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column min-width="193" prop="categoryName" label="菜品分类"></el-table-column>
            <el-table-column min-width="193" prop="price" label="售价"></el-table-column>
            <el-table-column class-name="sale-status" width="193" label="售卖状态">
                <template slot-scope="scope">
                    <span class="status" :class="{ active: scope.row.status === 1 }">{{ scope.row.status === 1 ? '启售' : '停售' }}</span>
                </template>
            </el-table-column>
            <el-table-column width="193" prop="updateTime" label="最后操作时间"></el-table-column>
            <el-table-column width="250" label="操作">
                <template slot-scope="scope">
                    <div class="operate">
                        <span @click="$router.push(`/dish/add?id=${scope.row.id}`)" class="edit">修改</span>
                        <span @click="deleteDish([scope.row.id])" class="delete">删除</span>
                        <span @click="changeStatus(scope.row.status, scope.row.id)" v-if="scope.row.status === 0" class="status open">启售</span>
                        <span @click="changeStatus(scope.row.status, scope.row.id)" v-else class="status stop">停售</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginate">
            <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 40]"
            :total="pageTotal"
            :page-size.sync="pageSize"
            :current-page.sync="page"
            @size-change="getDish()"
            @current-change="getDish()"
            ></el-pagination>
        </div>
    </div>
    <div v-else class="main">
        <div class="empty">
            <img class="empty-pic" src="@/assets/search_table_empty.png" alt="">
            <span class="hint">这里空空如也~</span>
        </div>
    </div>
  </div>
</template>

<script>
import { getCategoryList } from '@/api/category'
import { getDish, changeStatus, deleteDish } from '@/api/dish'
export default {
  name: 'DishIndex',
  data () {
    return {
      dishName: '',
      dishCategoryId: '',
      dishCategoryOptions: [],
      sellStatusId: '',
      sellStatusOptions: [
        { value: 1, label: '启售' },
        { value: 0, label: '停售' }
      ],
      page: 1,
      pageTotal: 0,
      pageSize: 10,
      dishList: [],
      checkedList: []
    }
  },
  created () {
    this.getDish()
    this.getDishCategory()
  },
  methods: {
    async getDish () {
      const res = await getDish({
        categoryId: this.dishCategoryId,
        name: this.dishName,
        page: this.page,
        pageSize: this.pageSize,
        status: this.sellStatusId
      })
      if (res.code === 1) {
        this.dishList = res.data.records
        this.pageTotal = res.data.total
      }
    },
    changeStatus (status, id) {
      this.$confirm('确认更改该菜品状态？', '提示', {}).then(async () => {
        const res = await changeStatus(status ? 0 : 1, id)
        if (res.code === 1) {
          this.$message.success('操作成功')
          this.getDish()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {})
    },
    deleteDish (ids) {
      this.$confirm('确定删除该菜品，是否继续？', '确定删除', {
        confirmButtonText: '删除'
      }).then(async () => {
        const res = await deleteDish(ids.join(','))
        if (res.code === 1) {
          this.$message.success('操作成功')
          this.getDish()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {})
    },
    selectionChange (selection) {
      const arr = []
      selection.forEach(item => {
        arr.push(item.id)
      })
      this.checkedList = arr
    },
    async getDishCategory () {
      const res = await getCategoryList({ type: 1 })
      if (res.code === 1) {
        res.data.forEach(item => {
          this.dishCategoryOptions.push({
            value: item.id,
            label: item.name
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.dish-index {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;

    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #333;

        .form,
        .delete-add {
            display: flex;
            align-items: center;
        }

        .form {
            gap: 15px;

            > div {
                display: flex;
                align-items: center;
                gap: 5px;

                .name {
                    flex-shrink: 0;
                }

                .el-input,
                .el-select {
                    max-width: 207px;
                }
            }

            .el-button {
                background-color: #333;
                color: #fff;
            }

            .el-button:hover {
                background-color: #666;
            }

            .el-button:active {
                background-color: #333;
            }
        }

        .delete-add {
            gap: 20px;

            .delete {
                color: #f56c6c;
                cursor: pointer;
            }
        }
    }

    .main {
        width: calc(100% - 5px);
        margin: 0 auto;
        margin-top: 20px;

        .empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            margin-top: 200px;
            padding-bottom: 100px;

            .empty-pic {
                width: 250px;
                height: auto;
            }

            .hint {
                font-size: 14px;
                color: #666;
            }
        }

        ::v-deep .el-table {

            thead .el-table-column--selection {
                padding-left: 4px;
            }

            .sale-status .status {
                display: flex;
                align-items: center;
                color: #333;

                &::before {
                    display: block;
                    content: "";
                    width: 5px;
                    height: 5px;
                    border-radius: 100vh;
                    background-color: #bdbdbd;
                    margin-right: 5px;
                }

                &.active::before {
                    background-color: #1dc779;
                }
            }

            .operate {
                display: flex;
                align-items: center;
                gap: 15px;
                color: #419eff;

                > span {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                }

                > span::after {
                    display: block;
                    content: '';
                    width: 1px;
                    height: 14px;
                    background-color: #ebeef5;
                    margin-left: 10px;
                }

                > span:last-of-type:after {
                    display: none;
                }

                .delete,
                .stop {
                    color: #f56c6c;
                }
            }
        }
    }
}
</style>
